<template>
  <div class="right_login">
    <div style="display: flex; justify-content: center; align-items: center">
      <img
        src="https://img0.baidu.com/it/u=1147442017,3681631581&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400"
        alt=""
        style="width: 40px; height: 40px"
      />
      <h2 style="margin-left: 10px">快速开发框架</h2>
    </div>
    <div class="item">
      <input
        type="text"
        placeholder="账号"
        v-model="form.username"
        @keyup.enter.native="onSubmit"
      />
    </div>
    <div class="item">
      <input
        type="password"
        placeholder="密码"
        v-model="form.password"
        @keyup.enter.native="onSubmit"
      />
    </div>
    <div class="item" style="display: flex">
      <input
        type="text"
        placeholder="验证码"
        v-model="form.code"
        @keyup.enter.native="onSubmit"
        style="width: 75%; height: 60px"
      />
      <img
        @click="code"
        :src="codePath"
        alt=""
        style="
          width: 20%;
          height: 36px;
          background: rgba(255, 255, 255, 0.8);
          margin-left: 4%;
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0 5px 10px #888888;
        "
      />
    </div>
    <div class="submit">
      <button @click="onSubmit">登 录</button>
    </div>
  </div>
</template>

<script>
import { getCode, login } from "@/api/auth/login";
import { validatenull } from "@/util/validate.js";

export default {
  data() {
    return {
      loadingCode: true,
      loading: false,
      form: {
        username: "",
        password: "",
        code: "",
        key: "",
      },
      codePath: "",
    };
  },
  created() {
    this.code();
  },
  methods: {
    code() {
      getCode().then((res) => {
        this.codePath = res.data.data.img;
        this.form["key"] = res.data.data.key;
        this.loadingCode = false;
      });
    },
    onSubmit() {
      let message = "";
      if (validatenull(this.form.username)) {
        message = message + "用户名不能为空；";
      }
      if (validatenull(this.form.password)) {
        message = message + "密码不能为空；";
      }
      if (validatenull(this.form.code)) {
        message = message + "验证码不能为空";
      }
      if (message === "") {
        const loading = this.$loading({
          lock: true,
          text: "登陆中",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.$store
          .dispatch("LoginByUsername", this.form)
          .then((res) => {
            loading.close();
            this.$router.push("/");
          })
          .catch((e) => {
            loading.close();
          });
      } else {
        this.$message.error(message);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.right_login {
  width: 25%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 10px #888888;
  border-radius: 20px;
  padding: 0 30px 30px;
  margin-bottom: 200px;
}
@media screen and (max-width: 1024px) {
  /* 当页面宽度小于等于768像素时应用此样式 */
  .right_login {
    width: 80%;
  }
}
input {
  background: transparent !important;
  outline: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: #000;
  padding: 10px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: 0 5px 10px #888888;
  border: none;

}

.item {
  height: 60px;
  margin-bottom: 20px;
}

.submit {
  text-align: center;
  margin-bottom: 10px;
  & button {
    box-shadow: 0px 5px 10px #888888;
    background: transparent;
    color: #000;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    border: none;
    &:hover {
      color: #0ee63d;
    }
  }
}
</style>
